<template >
  <RegionFullSelects v-model="region" :town="true" @change="change" />
  <div>
    <DialogModalBox v-model:visible="visible">
      <UserProfile @close="close" />
    </DialogModalBox>
    
    <a-button @click="visible = true" >Open</a-button>
  </div>
</template >

<script setup >
import { RegionFullSelects } from 'v-region';
import { DialogModalBox } from 'v-dialogs'
import UserProfile from "@components/UserProfile.vue";

const visible = ref( false );
const close = () => {
  visible.value = false;
}

const region = reactive( {
  province : "420000",
  city : "420900",
  area : "420902",
  town : "420902002"
} );
const change = ( data ) => {
  console.log(data);
}


onMounted( () => {

} );
onBeforeUnmount( () => {

} );
</script >

<style >
@import "tailwindcss";
</style >
<style lang="scss" >


</style >